<template>
  <div class="mb-20 bg-white">
    <NavBar />
    <div class="flex justify-center">
      <div class="pb-20" style="margin-top:79px;">
        <div class="container-width">
          <div class="flex flex-row  w-full">
            <MineLeftNav />
            <div class="flex-1 flex flex-col w-full">
              <div class="flex flex-col bg-[#F9F9F9]  w-full h-36">
                <div class="h-11 flex items-center border-b border-[#E0E0E0] pl-5 text-sm">认领对应的园区</div>
                <div class="h-24 pl-5 pt-8">
                  <input type="text" class="w-72 py-2 px-2.5 h-8 sm:text-sm border border-slate-300" placeholder="搜索认领的园区输入园区名称或园区关键词" />
                  <button class="ml-3 px-3 py-2 bg-[#FE7743] text-sm text-white" @click="handleFilter" style="cursor: pointer;">搜索园区</button>
                  <button class="ml-3 px-3 py-2 bg-[#FE7743] text-sm text-white" @click="handleCreate" style="cursor: pointer;">找不到？创建园区</button>
                </div>
              </div>
              <div class="flex flex-col bg-[#F2F2F2] w-full mt-6">
                <table class="border border-[#E6E6E6] text-sm">
                  <thead>
                    <tr>
                      <th class="border border-[#E6E6E6] text-left px-3 py-2 text-[#666666]">园区编号</th>
                      <th class="border border-[#E6E6E6] text-left px-3 py-2 text-[#666666]">园区名称</th>
                      <th class="border border-[#E6E6E6] text-left px-3 py-2 text-[#666666]">所在地区</th>
                      <th class="border border-[#E6E6E6] text-left px-3 py-2 text-[#666666]">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item, index) in parks" :key="index" class="bg-[#FFFFFF]">
                      <td class="border border-[#E6E6E6] px-3 py-2 text-[#7B7B7B]">{{ item.id }}</td>
                      <td class="border border-[#E6E6E6] px-3 py-2 text-[#7B7B7B]">{{ item.yuanquname }}</td>
                      <td class="border border-[#E6E6E6] px-3 py-2 text-[#7B7B7B]">{{ item.address }}</td>
                      <td class="border border-[#E6E6E6] px-3 py-2 text-[#7B7B7B]">
                        <button class="px-3 py-2 bg-[#FE7743] text-[12px] text-white" @click="handleUpdate(item)" style="cursor: pointer;">修改</button>
                        <button class="px-3 py-2 ml-3 bg-[#FE7743] text-[12px] text-white" @click="handleDelete(item)" style="cursor: pointer;">删除</button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :before-close="handleDialogClose">
          <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="margin-left:50px;">
            <el-form-item label="园区LOGO" prop="logourl">
              <Upload
                @uploaded="logoUploadedHandle"
              />
            </el-form-item>
            <el-form-item label="">
              建议上传图片大小：长214px*高131px；格式：jps/png；大小20M以内
            </el-form-item>
            <el-form-item label="园区图片" prop="pictureurl">
              <Upload
                @uploaded="pictureUploadedHandle"
              />
            </el-form-item>
            <el-form-item label="">
              建议上传图片大小：长594px*312px；格式：jps/png；大小20M以内
            </el-form-item>
            <el-form-item label="园区名称" prop="yuanquname">
              <el-input v-model="temp.yuanquname" />
            </el-form-item>
            <el-form-item label="园区介绍" prop="details">
              <el-input v-model="temp.details" type="textarea" :rows="2" />
            </el-form-item>
            <el-form-item label="园区类型" prop="yuanquleixing">
              <el-select v-model="temp.yuanquleixing" placeholder="请选择">
                <el-option
                  v-for="item in YuanQuLeiXingOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="行政级别" prop="guojiajibie">
              <el-select v-model="temp.guojiajibie" placeholder="请选择">
                <el-option
                  v-for="item in GuoJiaJiBieOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="土地存量" prop="tudicunliang">
              <el-input v-model="temp.tudicunliang" />
            </el-form-item>
            <el-form-item label="所在城市" prop="province">
              <el-select v-model="temp.province" placeholder="请选择" @change="getCityList">
                <el-option
                  v-for="(item, index) in provinceList"
                  :key="index"
                  :label="item.name"
                  :value="item.provincecode">
                </el-option>
              </el-select>
              <el-select v-model="temp.city" placeholder="请选择" style="margin-left: 10px;">
                <el-option
                  v-for="(item, index) in cityList"
                  :key="index"
                  :label="item.name"
                  :value="item.provincecode">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="园区地址" prop="address">
              <el-input v-model="temp.address" />
            </el-form-item>
            <el-divider content-position="left">电力基础</el-divider>
            <el-form-item label="电压" prop="dianya">
              <el-input v-model="temp.dianya" />
            </el-form-item>
            <el-form-item label="居民用电" prop="juminyongdian">
              <el-input v-model="temp.juminyongdian" />
            </el-form-item>
            <el-form-item label="商业用电" prop="shangyeyongdian">
              <el-input v-model="temp.shangyeyongdian" />
            </el-form-item>
            <el-form-item label="工业用电" prop="gongyeyongdian">
              <el-input v-model="temp.gongyeyongdian" />
            </el-form-item>
            <el-divider content-position="left">人工成本</el-divider>
            <el-form-item label="生活用水" prop="shenghuoyongshui">
              <el-input v-model="temp.shenghuoyongshui" />
            </el-form-item>
            <el-form-item label="中性水" prop="zhongxingshui">
              <el-input v-model="temp.zhongxingshui" />
            </el-form-item>
            <el-form-item label="水蒸气" prop="shuizhengqi">
              <el-input v-model="temp.shuizhengqi" />
            </el-form-item>
            <el-form-item label="污水处理" prop="wushuichuli">
              <el-input v-model="temp.wushuichuli" />
            </el-form-item>
            <el-form-item label="天然气" prop="tianranqi">
              <el-input v-model="temp.tianranqi" />
            </el-form-item>
            <el-form-item label="暖气" prop="nuanqi">
              <el-input v-model="temp.nuanqi" />
            </el-form-item>
            <el-divider content-position="left">人工成本</el-divider>
            <el-form-item label="最低标准" prop="zuidibiaozhun">
              <el-input v-model="temp.zuidibiaozhun" />
            </el-form-item>
            <el-form-item label="普通工人" prop="putonggongren">
              <el-input v-model="temp.putonggongren" />
            </el-form-item>
            <el-form-item label="中层管理" prop="zhongcengguanli">
              <el-input v-model="temp.zhongcengguanli" />
            </el-form-item>
            <el-form-item label="高层管理" prop="gaocengguanli">
              <el-input v-model="temp.gaocengguanli" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="handleDialogClose" style="cursor: pointer;">
              取消
            </el-button>
            <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()" style="cursor: pointer;">
              保存
            </el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue"
import MineLeftNav from '@/components/MineLeftNav'
import { fetchMyParks } from '@/api/user'
import { fetchPark, createPark, updatePark, deletePark } from '@/api/park'
import { fetchDictList } from '@/api/dict'
import { fetchProvinceList, fetchCityList } from '@/api/province'
import { uploadPicture } from '@/api/common'
import { getToken } from '@/utils/auth'
import Upload from '@/components/Upload/SingleImage'

export default {
  components: {
    MineLeftNav,
    NavBar,
    Upload
  },
  data() {
    return {
      parks: [],
      parkListQuery: {
        yuanquname: undefined
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '新增'
      },
      temp: {
        address: undefined,
        bangongfangzu: undefined,
        chenglinianfen: undefined,
        city: undefined,
        content: undefined,
        details: undefined,
        dianya: undefined,
        gaocengguanli: undefined,
        gongyedijia: undefined,
        gongyeyongdian: undefined,
        guihuamianji: undefined,
        guojiajibie: undefined,
        hangyeleixing: undefined,
        hangyeleixingArr: [],
        jianchengmianji: undefined,
        jingdu: undefined,
        juminyongdian: undefined,
        logourl: undefined,
        nuanqi: undefined,
        orderbyfield: undefined,
        pictureurl: undefined,
        province: undefined,
        putonggongren: undefined,
        remark: undefined,
        ruzhuqiyeArr: [],
        shangyeyongdian: undefined,
        shenghuoyongshui: undefined,
        shuishouyaoqiu: undefined,
        shuizhengqi: undefined,
        tianranqi: undefined,
        tudicunliang: undefined,
        tudijunjia: undefined,
        weidu: undefined,
        wushuichuli: undefined,
        xinxiwanzhengdu: undefined,
        yuanqubiaoqian: undefined,
        yuanqubiaoqianArr: [],
        yuanqufilename: undefined,
        yuanqufileurl: undefined,
        yuanqujiaobiao: undefined,
        yuanquleixing: undefined,
        yuanquname: undefined,
        yuanquniangdp: undefined,
        zhizhuchanye: undefined,
        zhizhuchanyeIds: [],
        zhongcengguanli: undefined,
        zhongxingshui: undefined,
        zuidibiaozhun: undefined,
        zuire: undefined
      },
      rules: {
        yuanquname: [{ required: true, message: '不能为空', trigger: 'blur' }],
        yuanquleixing: [{ required: true, message: '产值预计不能为空', trigger: 'blur' }],
        city: [{ required: true, message: '不能为空', trigger: 'blur' }],
        details: [{ required: true, message: '不能为空', trigger: 'blur' }],
        province: [{ required: true, message: '不能为空', trigger: 'blur' }],
        address: [{ required: true, message: '不能为空', trigger: 'blur' }],
        guojiajibie: [{ required: true, message: '不能为空', trigger: 'blur' }],
        tudicunliang: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      provinceList: [],
      cityList: [],
      YuanQuLeiXingOptions: [],
      GuoJiaJiBieOptions: [],
      dialogImageUrl: '',
      dialogVisible_picture: false,
      logoLimit: 1,
      logoList: [],
      deleteLogoList: [],
      uploadLogoDisabled_new: false,
      pictureLimit: 1,
      pictureList: [],
      deletePictureList: [],
      uploadPictureDisabled_new: false
    }
  },
  computed: {
    headers() {
      return {
        'Authorization': getToken()
      }
    }
  },
  created() {
    this.getList()
    fetchDictList({dictType: 'sys_yuanqu_type'}).then(response => {
      this.YuanQuLeiXingOptions = response.data
    })
    fetchDictList({dictType: 'sys_guojiajibie'}).then(response => {
      this.GuoJiaJiBieOptions = response.data
    })
    fetchProvinceList().then(response => {
      this.provinceList = response.data
    })
  },
  methods: {
    handleFilter() {
      this.getList()
    },
    getList() {
      fetchMyParks(this.parkListQuery).then(res => {
        this.parks = res.data
      })
    },
    getCityList() {
      fetchCityList({ provincecode: this.temp.province }).then(res => {
        this.cityList = res.data
      })
    },
    handleDialogClose(done) {
      this.$confirm('确认关闭？').then(() => {
        this.resetTemp()
        this.dialogFormVisible = false
        done()
      }).catch(() => {})
    },
    resetTemp() {
      this.temp = {
        address: undefined,
        bangongfangzu: undefined,
        chenglinianfen: undefined,
        city: undefined,
        content: undefined,
        details: undefined,
        dianya: undefined,
        gaocengguanli: undefined,
        gongyedijia: undefined,
        gongyeyongdian: undefined,
        guihuamianji: undefined,
        guojiajibie: undefined,
        hangyeleixing: undefined,
        hangyeleixingArr: [],
        jianchengmianji: undefined,
        jingdu: undefined,
        juminyongdian: undefined,
        logourl: undefined,
        nuanqi: undefined,
        orderbyfield: undefined,
        pictureurl: undefined,
        province: undefined,
        putonggongren: undefined,
        remark: undefined,
        ruzhuqiyeArr: [],
        shangyeyongdian: undefined,
        shenghuoyongshui: undefined,
        shuishouyaoqiu: undefined,
        shuizhengqi: undefined,
        tianranqi: undefined,
        tudicunliang: undefined,
        tudijunjia: undefined,
        weidu: undefined,
        wushuichuli: undefined,
        xinxiwanzhengdu: undefined,
        yuanqubiaoqian: undefined,
        yuanqubiaoqianArr: [],
        yuanqufilename: undefined,
        yuanqufileurl: undefined,
        yuanqujiaobiao: undefined,
        yuanquleixing: undefined,
        yuanquname: undefined,
        yuanquniangdp: undefined,
        zhizhuchanye: undefined,
        zhizhuchanyeIds: [],
        zhongcengguanli: undefined,
        zhongxingshui: undefined,
        zuidibiaozhun: undefined,
        zuire: undefined
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          createPark(this.temp).then((res) => {
            if (res.result === 1) {
              this.getList()
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: res.msg,
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify({
                title: '错误',
                message: res.msg,
                type: 'error',
                duration: 2000
              })
            }
          })
        }
      })
    },
    handleUpdate(row) {
      this.resetTemp()
      fetchPark(row.id).then(res => {
        if (res.result === 1) {
          this.temp = res.data
          this.logoList.push({
            name: 1,
            url: this.temp.logourl
          })
          this.dialogStatus = 'update'
          this.dialogFormVisible = true
          this.$nextTick(() => {
            this.$refs['dataForm'].clearValidate()
          })
        } else {
          this.$notify({
            title: '错误',
            message: res.message,
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
          updatePark(tempData).then((res) => {
            if (res.result === 1) {
              this.getList()
              // this.list.unshift(this.temp)
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: res.message,
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify({
                title: '错误',
                message: res.message,
                type: 'error',
                duration: 2000
              })
            }
          })
        }
      })
    },
    handleDelete(row, index) {
      deletePark(row).then(res => {
        if (res.result === 1) {
          this.getList()
          this.$notify({
            title: '成功',
            message: res.message,
            type: 'success',
            duration: 2000
          })
        } else {
          this.$notify({
            title: '错误',
            message: res.message,
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    uploadLogo_new(params) {
      var formData = new FormData()
      formData.append('file', params.file)
      uploadPicture(formData).then((res) => {
        this.temp.logourl = res.result[0]
      })
    },
    beforeLogoUpload(file) {
      let isCanUpload = true
      if (file.size / 1024 / 1024 > 2) {
        isCanUpload = false
        this.$notify({
          title: '上传失败',
          message: '图片大小超过2M',
          type: 'warning',
          duration: 2000
        })
      }
      return isCanUpload
    },
    handleLogoPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible_picture = true
    },
    handleLogoExce_new() {
      this.$message({
        type: 'error',
        message: `上传文件个数超出限制!最多上传${this.logoLimit}张图片!`
      })
    },
    handleLogoLimit_new(file, fileList) {
      this.uploadLogoDisabled_new = fileList.length >= this.logoLimit
    },
    handleLogoRemove_new(file, fileList) {
      this.temp.avatar = fileList
      this.uploadLogoDisabled_new = fileList.length >= this.logoLimit
      if (file.id) {
        this.deleteLogoList.push(file.id)
      }
    },
    uploadPicture_new(params) {
      var formData = new FormData()
      formData.append('file', params.file)
      uploadPicture(formData).then((res) => {
        this.temp.pictureurl = res.result[0]
      })
    },
    beforePictureUpload(file) {
      let isCanUpload = true
      if (file.size / 1024 / 1024 > 2) {
        isCanUpload = false
        this.$notify({
          title: '上传失败',
          message: '图片大小超过2M',
          type: 'warning',
          duration: 2000
        })
      }
      return isCanUpload
    },
    handlePicturePreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible_picture = true
    },
    handlePictureExce_new() {
      this.$message({
        type: 'error',
        message: `上传文件个数超出限制!最多上传${this.logoLimit}张图片!`
      })
    },
    handlePictureLimit_new(file, fileList) {
      this.uploadPictureDisabled_new = fileList.length >= this.logoLimit
    },
    handlePictureRemove_new(file, fileList) {
      this.temp.avatar = fileList
      this.uploadPictureDisabled_new = fileList.length >= this.logoLimit
      if (file.id) {
        this.deletePictureList.push(file.id)
      }
    },
    logoUploadedHandle(url) {
      this.temp.logourl = url
    },
    pictureUploadedHandle(url) {
      this.temp.pictureurl = url
    }
  }
}
</script>

<style lang="scss" scoped>
.fabuxiangmu{
  width: 46rem;
  height: 77rem;
  position: absolute;
  top: 6.25rem;
  left: 0rem;
  right: 0rem;
  margin: auto;
  border: 1px solid #DCDFE6;
}
</style>